<!--继承模板-->
{extend name="common/index" /}

{block name="link"}
<link rel="stylesheet" type="text/css" href="/static/index/css/common.css">
<link rel="stylesheet" type="text/css" href="/static/index/css/list.css">
<link rel="stylesheet" type="text/css" href="/static/index/css/idangerous.swiper.css">
<script type="text/javascript" src="/static/index/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/index/js/idangerous.swiper.min.js"></script>
{/block}
{block name="content"}
	<div class="information wrapper clearfix">
		<div class="detailLeft">
			<div class="articleBox">
				<h2>{$info.title}</h2>
				<p class="desc">
					<span>作者：{$info.author}</span>
					<span>发布时间：{$info.addtime}</span>
					<span>阅读量：{$info.read_num}</span>
				</p>
				<div class="main">
					{$info.detail}
				</div>
			</div>
			<div class="likeBox">
				<label class="tag">猜你喜欢</label>
				{foreach $randData as $key => $value}
				<div class="row clearfix">
					<a href="{$value.url}?cid={$info.cate_id}#{$value.id}">
					<label>{$value.name}</label>
					</a>
					<ul class="clearfix">
						{foreach $value.item as $k => $v}
						<li><a href="{$v.url}" target="_blank">{$v.title}</a></li>
						{/foreach}

					</ul>
				</div>
				{/foreach}
			</div>
			<div class="updateBox">
				<div class="updateTab clearfix">
					<label class="lab">最新</label>
					<div class="swiper-container">
				        <ul class="swiper-wrapper">
							{foreach $cate as $key => $value}
							<li cate="{$value.id}" class="swiper-slide {if $value.id == $info.cate_id}current{/if}">{$value.name}</li>
							{/foreach}
				        </ul>
				        <div class="swiper-pagination" style="display:none;"></div>
				    </div>
				    <div class="swiper-button-next iconfont">&#xe609;</div>
				    <div class="swiper-button-prev iconfont">&#xe8a9;</div>
				</div>
				<div class="updateContent">
					{if $news neq []}
					{if $news.news neq []}
					{foreach news.news as $key => $value}
					<dl class="dl01 clearfix">
						<dt class="fl"><a href="__INDEX__/news/detail?id={$value.id}"><img src="{$value.img}"></a></dt>
						<dd class="fr">
							<p class="titleTar over"><a href="__INDEX__/news/detail?id={$value.id}">{$value.title}</a></p>
							<p class="text">
								{$value.sign}
							</p>
							<p class="remark">{$value.author} &nbsp;&nbsp;&nbsp; {$value.addtime}</p>
						</dd>
					</dl>
					{/foreach}
					{/if}
					{if $news.ad neq []}
					<dl class="dl02">
						<dt class="over"><a href="__INDEX__/news/detail?id={$news.ad.id}">{$news.ad.title}</a></dt>
						<dd class="clearfix dd_ad">
							{foreach $news.ad.img as $value}
							<a href="__INDEX__/news/detail?id={$news.ad.id}"><img src="{$value}"></a>
							{/foreach}
						</dd>
					</dl>
					{/if}
					{if $news.imgs neq []}
					<dl class="dl02">
						<dt class="over"><a href="__INDEX__/news/detail?id={$news.imgs.id}">{$news.imgs.title}</a></dt>
						<dd class="clearfix">
							{foreach $news.imgs.img as $value}
							<a href="__INDEX__/news/detail?id={$news.imgs.id}"><img src="{$value}"></a>
							{/foreach}

						</dd>
					</dl>
					{/if}
					{/if}
					<!--加载进度条 -->
					<div class="waterfllow-loading">
						<img class="loading-progress" src="/static/index/img/loading.gif" />
					</div>
				</div>
			</div>
		</div>
		<div class="detailRight">
<!--广告-->
<!--			<a class="detailAd" href="">-->
<!--				<img src="https://s2.ax1x.com/2019/08/19/m1Rf2V.png">-->
<!--			</a>-->
			<div class="recommend">
				<h2>推荐</h2>
				{foreach $newsList as $key => $value}
				<dl class="clearfix">
					<dt class="fl"><img src="{$value.img}"></dt>
					<dd class="fr">{$value.title}</dd>
					<a href="__INDEX__/news/detail?id={$value.id}"></a>
				</dl>
				{/foreach}
			</div>
			<!--广告-->
<!--			<div class="adsBox clearfix">-->
<!--				<a href="">-->
<!--					<img src="https://s2.ax1x.com/2019/08/19/m1Rf2V.png">-->
<!--				</a>-->
<!--				<a href="">-->
<!--					<img src="https://s2.ax1x.com/2019/08/19/m1Rf2V.png">-->
<!--				</a>-->
<!--				<a href="">-->
<!--					<img src="https://s2.ax1x.com/2019/08/19/m1Rf2V.png">-->
<!--				</a>-->
<!--			</div>-->
		</div>

	</div>
<!--数据类型-->
<input type="hidden" id="cate" value="{$info.cate_id}">
<!--数据类型end-->
<script type="text/javascript" src="/static/index/js/jquery.min.js"></script>
<script>
    var page = 0;
    function scrollTop() {
        return Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    }
    function documentHeight() {
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    }
    function windowHeight(){
        return (document.compatMode == "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight;
    }
    $(window).on('scroll', function() {
        console.log(documentHeight());
        console.log(windowHeight());
        if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
            console.log('滚动到底部了!');
            //->显示进度条
            $('.waterfllow-loading').addClass('active');
            //->去加载数据
            waterallowData();
        }else{
            //->隐藏进度条
            $('.waterfllow-loading').removeClass('active');
        }
    });

    //-> 数据加载
	function waterallowData() {
		//ajax
		page ++;
		var ahtml = '';
		//请求ajax
		var cid = $("#cate").val();
		$.ajax({
			type: "POST",
			url: "__INDEX__/news/getNewsType12List",
			data:{
				'cate_id':cid,
				'page':page,
			},
			success: function(data){
				console.log('return',data);
				data = jQuery.parseJSON(data);
				if(data.code == 200){
					console.log('追加数据');
					var list = data.data.list;
					var imgs = data.data.imgs;
					console.log('list',list);
					if(list){
						$.each(list,function (index,item) {
							console.log('item',item);
							ahtml +=
									'<dl class="dl01 clearfix">' +
									'<dt class="fl"><a href="__INDEX__/news/detail?id='+item.id+'">' +
									'<img src="'+item.img+'">' +
									'</a></dt><dd class="fr">' +
									'<p class="titleTar over">' +
									'<a href="__INDEX__/news/detail?id='+item.id+'">'+item.title+'</a>' +
									'</p><p class="text">'+item.sign+'</p>' +
									'<p class="remark">'+item.author+'&nbsp;&nbsp;&nbsp; '+item.addtime+' </p></dd>' +
									'</dl>';
						})
					}
					if(imgs){
						ahtml +=
								'<dl class="dl02">' +
								'<dt class="over"><a href="__INDEX__/news/detail?id='+imgs.id+'">'+imgs.title+'</a></dt>' +
								'<dd class="clearfix">';
						$.each(imgs.img,function (index,item) {
							console.log('item',item);
							ahtml  += '<a href="__INDEX__/news/detail?id='+imgs.id+'"><img src="'+item+'"></a>';
						})
						ahtml  +=
								'</dd>' +
								'</dl>';
					}
					//->追加HTML到waterfllow-loading的前面
					$(".waterfllow-loading").before(ahtml);
					//->隐藏进度条
					$('.waterfllow-loading').removeClass('active');
				}
			}
		});
		//->追加HTML到waterfllow-loading的前面
		// $(".waterfllow-loading").before(ahtml);
	}
	$('.updateTab .swiper-slide').click(function(){
		page = 0;
		var cate_id = $(this).attr('cate');
		$("#cate").val(cate_id);
		console.log('cate_id',cate_id);
		//ajax
		$.ajax({
			type: "POST",
			url: "__INDEX__/news/getFooterNewsView",
			data:{
				'cate_id':cate_id,
			},
			success: function(data){
				// console.log('return',data);
				var ahtml = '';
				data = jQuery.parseJSON(data);
				if(data.code == 200){
					// console.log('code',data.code);
					var news = data.data.news;
					var ad = data.data.ad;
					var imgs = data.data.imgs;
					if(news){
						// console.log('news',news);
						$.each(news,function (index,item) {
							// console.log('news.item',item);
							ahtml += '<dl class="dl01 clearfix"><dt class="fl"><a href="__INDEX__/news/detail?id='+item.id+'"><img src="'+item.img+'"></a></dt><dd class="fr"><p class="titleTar over"><a href="__INDEX__/news/detail?id='+item.id+'">'+item.title+'</a></p><p class="text">'+item.sign+'</p><p class="remark">'+item.author+' &nbsp;&nbsp;&nbsp; '+item.addtime+'</p></dd></dl>';
						})
					}
					// console.log('html1',ahtml);
					if(ad){
						ahtml += '<dl class="dl02"><dt class="over"><a href="__INDEX__/news/detail?id='+ad.id+'">'+ad.title+'</a></dt><dd class="clearfix dd_ad">';
						$.each(ad.img,function (index,item) {
							// console.log('ad.img.img',item);
							ahtml += '<a href="__INDEX__/news/detail?id='+ad.id+'"><img src="'+item+'"></a>';
						})
						ahtml+='</dd></dl>';
					}
					// console.log('html2',ahtml);
					if(imgs){
						// console.log('imgs',imgs);
						ahtml +='<dl class="dl02"><dt class="over"><a href="__INDEX__/news/detail?id='+imgs.id+'">'+imgs.title+'</a></dt><dd class="clearfix">';
						$.each(imgs.img,function (index,item) {
							// console.log('imgs.img',item);
							ahtml +='<a href="__INDEX__/news/detail?id='+imgs.id+'"><img src="'+item+'"></a>';
						})
						ahtml +='</dd></dl>';
					}
					ahtml +='<div class="waterfllow-loading"><img class="loading-progress" src="/static/index/img/loading.gif" /></div>';
					console.log('html',ahtml);
					$(".updateContent").html(ahtml);
				}else{
					$(".updateContent").html(false);
				}
			}
		});
		$(this).addClass('current').siblings().removeClass('current');
	})
</script>
{/block}

